<template>
 <div class="m-4" style="text-align: left;">
  <label for="name">内容</label>
  <input type="text" id="formGroupExampleInput" class="form-control" v-model="inputValue" placeholder="添加待办事件"
   @keydown.enter="saved">
 </div>
 <div class="btnctl">
  <button class="btn btn-primary float-end btn-sm mt-2 me-4" @click="saved">保存</button>
  <button class="btn float-end btn-sm mt-2 me-4" @click="cancel">取消</button>
 </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import store from '@/store'
export default defineComponent({
 name: 'edit-item',
 setup (props) {
  const router = useRouter()
  const route = useRoute()
  const todos = store.state.todos
  const i = todos.findIndex(item => item.id === route.query.id)
  const item = todos[i]
  const inputValue = ref(item.text)
  const saved = () => {
   if (inputValue.value === '') return
   store.commit('edit', { id: route.query.id, text: inputValue })
   router.go(-1)
  }

  const cancel = () => {
   router.go(-1)
  }

  return {
   inputValue,
   saved,
   cancel
  }
 },
 computed: {
  username () {
   // 我们很快就会看到 `params` 是什么
   return this.$route.params
  }
 },
 mounted () {
  setTimeout(() => {
   // 失败的测试，没有拿到params的值
   console.log(this.$route.params, this.username)
  }, 2000)
 }
})
</script>
